<template>
  <div>
    <fullCalendar
      :events="fcEvents"
      :config="config"
      locale="zh"
      :buttonText="buttonText"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick"
    >
      <!--<template slot="fc-event-card" scope="p">
        <p><i class="fa">sadfsd</i> {{ p.event.title }} test</p>
      </template>-->
    </fullCalendar>
  </div>
</template>
<script>
  let demoEvents = [
    {
      title: 'Sunny 725-727',
      start: '2020-09-08',
      end: '2020-09-10',
      cssClass: 'family'
    },
    {
      title: 'Lunfel 726-727',
      start: '2020-09-18',
      end: '2020-09-20',
      cssClass: ['home', 'work']
    },
  ];
  import fullCalendar from 'vue-fullcalendar'

  export default {
    data() {
      return {
        name: 'Sunny!',
        fcEvents: demoEvents,
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
          day: "日",
          list: '表'
        },
        config: {
          buttonText: { today: "今天", month: "月", week: "周", day: "日" },
          locale: "zh",
          editable: false, //是否允许修改事件
          selectable: false,
          eventLimit: 4, //事件个数
          allDaySlot: false, //是否显示allDay
          defaultView: "month", //显示默认视图
          eventClick: this.eventClick, //点击事件
          dayClick: this.dayClick, //点击日程表上面某一天
        }
      }
    },
    components: {fullCalendar},
    methods: {
      'changeMonth'(start, end, current) {
        console.log('changeMonth', start, end, current)
      }
      ,
      'eventClick'(event, jsEvent, pos) {
        console.log('eventClick', event, jsEvent, pos)
      }
      ,
      'dayClick'(day, jsEvent) {
        console.log('dayClick', day, jsEvent)
      }
      ,
      'moreClick'(day, events, jsEvent) {
        console.log('moreCLick', day, events, jsEvent)
      }
    }
  }
</script>
<style lang='less'>
  .app {
    color: green;
  }
</style>